<template>
  <div class="carDiscount">
    <div class="tit-bg">
    </div>
    <div class="main">
        <div class="brands-title">
            <van-tabs background="#F5F5F5" color="transparent" title-active-color="#000">
                <van-tab title="推荐">
                    
                </van-tab>
             <van-tab v-for="item in brands" :title="item.name" :key="item.ps_heat">
                
            </van-tab>
            </van-tabs>
        </div>
        <ul class="cars_list">
            <li v-for="item in carList" :key="item.spu_id">
                <div class="pic"><img :src="item.logo" alt="" srcset=""></div>
                <span class="name">{{item.series_name}}</span>
                <span class="price">{{item.price}}<i>万起</i></span>
                <div class="gift-price">
                    <van-tag plain type="primary" color="#FE4455">{{item.text}}</van-tag>
                    <van-tag type="danger" color="#FE4455">￥{{item.amount}}</van-tag>
                </div>
                <div class="gift-btn">立即领取</div>
            </li>
        </ul>
        <div class="discount">
            <h3 class="title">特惠商家</h3>
            <div class="dis-item" v-for="item in carcommon" :key="item.dealer_id">
                <div class="store-top">
                    <div class="logo"><img :src="item.logo[0]"/></div>
                    <div class="store-info">
                        <div class="store-name">
                            <p>{{item.dealer_name}}</p>
                            <div class="name-god"><img src="../../assets/gold-medal.png" /></div>
                        </div>
                        <div class="store-address"><van-icon name="location-o" />{{item.address}}</div>
                    </div>
                </div>
                <div class="welfare">
                    <div class="quota">
                        <div><van-tag type="primary" color="#F8DDDF" text-color="#FF5558">{{item.text}}</van-tag></div>
                        <p>进店享立减优惠<span>￥{{item.amount}}</span></p>
                    </div>
                    <span class="collect-coupons">领券<van-icon name="arrow" /></span>
                </div>
                <van-tabs color="transparent" v-if="item.series_list.length !== 0">
                    <van-tab v-for="value in item.series_list" :key="value.series_id">
                        <template #title> 
                            <div class="bottom-item">
                                <div class="car-img">
                                    <div class="carLogo">
                                        <img :src="value.logo" alt="" srcset="">
                                    </div>
                                    <div class="yh-price">
                                        立减￥{{item.amount}}
                                    </div>
                                </div>
                                <div class="carname">{{value.series_name}}</div>
                            </div>
                        </template>
                    </van-tab>
                </van-tabs>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'carDiscount',
  data() {
    return {
        brands:[],
        carList:[],
        carcommon:[]
    }
  },
  async created(){
    await axios.get('http://localhost:9527/carDiscount.json').then(res=>{
        this.brands = res.data.Result.brand_list
        this.carList = res.data.Result.series_coupon
        this.carcommon = res.data.Result.common_coupon
        console.log(res.data.Result);
    })
  }
}
</script>

<style lang="scss" scoped>
.carDiscount{
    padding-top: 46px;
    .tit-bg{
        width: 100%;
        height: 116px;
        background-color: #111214;
        background-image: url(../../assets/banner-g.png);
        background-size: 100%;
    }
    .main {
        width: 100%;
        background: #F5F5F5;
        position: relative;
        top: -15px;
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        overflow: hidden;
        .cars_list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            padding: 10px;
            li {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 170px;
                height: 230px;
                background: #fff;
                margin-bottom: 10px;
                border-radius: 5px;
                .pic {
                    width: 138px;
                    height: 90px;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .name {
                    color: #242a33;
                    font-weight: 700;
                }
                .price {
                    color: #fe4455;
                    font-weight: 700;
                    font-size: 18px;
                    margin-top: 10px;
                    i {
                        font-style: normal;
                        font-size: 12px;
                        font-weight: 400;
                        margin-left: 5px;
                    }
                }
                .gift-price {
                    display: flex;
                    align-items: center;
                    margin: 5px 0;
                }
                .gift-btn {
                    width: 110px;
                    height: 28px;
                    border: 1px solid #000;
                    border-radius: 10px;
                    font-size: 14px;
                    text-align: center;
                    line-height: 28px;
                    margin-top: 5px;
                }
            }
        }
        .discount {
            padding: 10px;
            box-sizing: border-box;
            .dis-item {
                width: 100%;
                // height: 200px;
                background: #fff;
                border-radius: 5px;
                padding: 15px 0 15px 15px;
                box-sizing: border-box;
                margin-top:10px;
                .store-top {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    .logo {
                        width: 36px;
                        height: 36px;
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .store-info {
                        margin-left: 10px;
                        .store-name {
                            display: flex;
                            align-items: center;
                            width: 252px;
                            p {
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                color: #242a33;
                                font-weight: 700;
                                margin: 5px 0;
                            }
                            .name-god {
                                width: 20px;
                                height: 20px;
                                img {
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                        }
                        .store-address {
                            font-size: 12px;
                            width: 250px;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            color: #4F535E;
                        }
                    }
                }
                .welfare {
                    margin: 10px 0 0 5px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 12px;
                    padding-left:10px ;
                    width: 310px;
                    height: 32px;
                    background: #F7F7F7;
                    border-radius: 5px;
                    padding:0 10px;
                    box-sizing: border-box;
                    .quota {
                       display: flex;
                       align-items: center;
                       p {
                        margin-left: 10px;
                         span {
                            color:#FF5558;
                         }
                       }
                    }
                    .collect-coupons {
                        color:#FF5558;
                    }
                }
                .bottom-item {
                    margin-top: 20px;
                    .car-img {
                       border: 2px solid #FF5559;
                       border-radius: 5px;
                        .carLogo {
                            width: 135px;
                            height: 76px;
                            
                        img {
                            width: 100%;
                            height: 100%;
                        }
                        }
                        .yh-price {
                            width: 100%;
                            text-align: center;
                            background: #FF5457;
                            color: #fff;
                            font-size: 14px;
                            line-height: 24px;
                        }
                    }
                    .carname{
                        text-align: center;
                        margin-top: 5px;
                    }
                }
            }
        }
    }
}
.carDiscount ::v-deep {
    .brands-title {
        .van-tabs {
        margin-top: 10px;
        .van-tab--active {
            font-size: 18px;
            background: url('../../assets/bk.png') no-repeat  right 20%;
            background-size: 10%;
        }
     }
    }
    
    .van-tag {
        padding: 2px 5px;
    }
    .discount {
        .van-tabs--line .van-tabs__wrap  {
            height: 150px;
        }
        .van-tabs__nav--line.van-tabs__nav--complete {
            padding-left: 0;
        }
        .van-tabs__wrap--scrollable .van-tab {
            padding: 0 6px;
        }
    }
}
</style>
